<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <div class="logo-container">
      <div class="logo-wrapper" :class="{ 'logo-collapsed': isCollapsed }">
        <el-icon class="logo-icon"><Connection /></el-icon>
        <span class="logo-text">DDNS</span>
      </div>
    </div>
    
    <el-menu
      :collapse="isCollapsed"
      :default-active="activeRoute"
      class="sidebar-menu"
      router
      @select="handleSelect"
      background-color="var(--sidebar-bg)"
      text-color="var(--menu-text)"
      active-text-color="var(--primary-color)"
      :collapse-transition="false"
    >
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>
      
      <el-menu-item index="/ddns-config">
        <el-icon><Setting /></el-icon>
        <span>DDNS配置</span>
      </el-menu-item>
      
      <el-menu-item index="/file-server">
        <el-icon><Folder /></el-icon>
        <span>文件服务器</span>
      </el-menu-item>
      
      <el-menu-item index="/about">
        <el-icon><InfoFilled /></el-icon>
        <span>关于</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { 
  HomeFilled, 
  Setting, 
  Monitor,
  Folder,
  InfoFilled,
  Expand,
  Fold,
  Connection
} from '@element-plus/icons-vue'

export default {
  name: 'Sidebar',
  components: {
    HomeFilled,
    Setting,
    Monitor,
    Folder,
    InfoFilled,
    Expand,
    Fold,
    Connection
  },
  emits: ['collapse-change'],
  props: {
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const route = useRoute()
    const isCollapsed = computed(() => {
      return props.collapsed
    })
    
    const activeRoute = computed(() => {
      return route.path
    })
    
    const handleSelect = (key) => {
      console.log(key)
    }
    
    return {
      isCollapsed,
      activeRoute,
      handleSelect
    }
  }
}
</script>

<style scoped>
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: width 0.15s;
  width: var(--sidebar-width);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-wrapper {
  display: flex;
  align-items: center;
  transition: all 0.15s;
  overflow: hidden;
  width: 100%;
}

.logo-icon {
  font-size: 28px;
  color: var(--primary-color);
  min-width: 28px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin-left: 10px;
  white-space: nowrap;
}

.logo-collapsed {
  justify-content: center;
}

.logo-collapsed .logo-text {
  width: 0;
  opacity: 0;
  margin-left: 0;
}

.app-name {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.sidebar-menu {
  flex: 1;
  border-right: none;
}

.el-menu {
  border-right: none !important;
}
</style> 